﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/Master/AdminDialog.Master"
    AutoEventWireup="true" CodeBehind="TemplateSet.aspx.cs" Inherits="Besture.UI.Admin.Content.TemplateSet" %>

<%@ Import Namespace="Besture.Common" %>
<%@ Import Namespace="Besture.Common.Helper" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
        var api = frameElement.api, W = api.opener;

        api.button({
            id: 'valueOk',
            name: '确定',
            callback: ok
        });
        function ok() {
            $("#<%=btnSubmit.ClientID %>").click();
        }
    </script>
    <style type="text/css">
        /*===============  重置  ===============*/
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td
        {
            padding: 0;
            margin: 0;
        }
        table
        {
            border-collapse: collapse;
            border-spacing: 0;
        }
        fieldset, img
        {
            border: 0;
        }
        address, caption, cite, code, dfn, em, strong, th, var
        {
            font-weight: normal;
            font-style: normal;
        }
        ol, ul
        {
            list-style: none;
        }
        caption, th
        {
            text-align: left;
        }
        h1, h2, h3, h4, h5, h6
        {
            font-weight: normal;
            font-size: 100%;
        }
        q:before, q:after
        {
            content: "";
        }
        abbr, acronym
        {
            border: 0;
        }
        
        /*===============  文字排版  ===============*/
        .f12
        {
            font-size: 12px;
        }
        .f13
        {
            font-size: 13px;
        }
        .f14
        {
            font-size: 14px;
        }
        .f15
        {
            font-size: 15px;
        }
        .f16
        {
            font-size: 16px;
        }
        .f18
        {
            font-size: 18px;
        }
        .f20
        {
            font-size: 20px;
        }
        
        .fb
        {
            font-weight: 700;
        }
        .fn
        {
            font-weight: 500;
        }
        .t1
        {
            text-indent: 1em;
        }
        .t2
        {
            text-indent: 2em;
        }
        
        /*===============  定位  ===============*/
        .tl
        {
            text-align: left;
        }
        .tc
        {
            text-align: center;
        }
        .tr
        {
            text-align: right;
        }
        .bc
        {
            margin-left: auto;
            margin-right: auto;
        }
        .fl
        {
            float: left;
        }
        .fr
        {
            float: right;
        }
        .cb
        {
            clear: both;
        }
        .cl
        {
            clear: left;
        }
        .cr
        {
            clear: right;
        }
        .clearfix:after
        {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix
        {
            display: inline-block;
        }
        *html .clearfix
        {
            height: 1%;
        }
        .clearfix
        {
            display: block;
        }
        .vm
        {
            vertical-align: middle;
        }
        .pr
        {
            position: relative;
        }
        .pa
        {
            position: absolute;
        }
        
        /*===============  长度高度  ===============*/
        .w1000
        {
            width: 1000px;
        }
        .w980
        {
            width: 980px;
        }
        .w960
        {
            width: 960px;
        }
        .w900
        {
            width: 900px;
        }
        .w800
        {
            width: 800px;
        }
        .w700
        {
            width: 400px;
        }
        .w600
        {
            width: 600px;
        }
        .w500
        {
            width: 500px;
        }
        .w400
        {
            width: 400px;
        }
        .w300
        {
            width: 300px;
        }
        .w200
        {
            width: 200px;
        }
        .w100
        {
            width: 100px;
        }
        .w90
        {
            width: 90px;
        }
        .w80
        {
            width: 80px;
        }
        .w70
        {
            width: 70px;
        }
        .w60
        {
            width: 60px;
        }
        .w50
        {
            width: 50px;
        }
        .w40
        {
            width: 40px;
        }
        .w30
        {
            width: 30px;
        }
        .w20
        {
            width: 20px;
        }
        .w10
        {
            width: 10px;
        }
        .h50
        {
            height: 50px;
        }
        .h80
        {
            height: 80px;
        }
        .h100
        {
            height: 100px;
        }
        .h200
        {
            height: 200px;
        }
        .h
        {
            height: 100%;
        }
        
        /*===============  边距  ===============*/
        .mt10
        {
            margin-top: 10px;
        }
        .mt15
        {
            margin-top: 15px;
        }
        .mt20
        {
            margin-top: 20px;
        }
        .mt30
        {
            margin-top: 30px;
        }
        .mt40
        {
            margin-top: 40px;
        }
        .mt50
        {
            margin-top: 50px;
        }
        .mt100
        {
            margin-top: 100px;
        }
        
        .mr10
        {
            margin-right: 10px;
        }
        .mr15
        {
            margin-right: 15px;
        }
        .mr20
        {
            margin-right: 20px;
        }
        .mr30
        {
            margin-right: 30px;
        }
        .mr40
        {
            margin-right: 40px;
        }
        .mr50
        {
            margin-right: 50px;
        }
        .mr100
        {
            margin-right: 100px;
        }
        
        .mb10
        {
            margin-bottom: 10px;
        }
        .mb15
        {
            margin-bottom: 15px;
        }
        .mb20
        {
            margin-bottom: 20px;
        }
        .mb30
        {
            margin-bottom: 30px;
        }
        .mb40
        {
            margin-bottom: 40px;
        }
        .mb50
        {
            margin-bottom: 50px;
        }
        .mb100
        {
            margin-bottom: 100px;
        }
        
        .ml10
        {
            margin-left: 10px;
        }
        .ml15
        {
            margin-left: 15px;
        }
        .ml20
        {
            margin-left: 20px;
        }
        .ml30
        {
            margin-left: 30px;
        }
        .ml40
        {
            margin-left: 40px;
        }
        .ml50
        {
            margin-left: 50px;
        }
        .ml100
        {
            margin-left: 100px;
        }
        
        .pt5
        {
            padding-top: 5px;
        }
        .pt10
        {
            padding-top: 10px;
        }
        .pt15
        {
            padding-top: 15px;
        }
        .pt20
        {
            padding-top: 20px;
        }
        .pt30
        {
            padding-top: 30px;
        }
        .pt40
        {
            padding-top: 40px;
        }
        .pt50
        {
            padding-top: 50px;
        }
        .pt100
        {
            padding-top: 100px;
        }
        
        .pr5
        {
            padding-right: 5px;
        }
        .pr10
        {
            padding-right: 10px;
        }
        .pr15
        {
            padding-right: 15px;
        }
        .pr20
        {
            padding-right: 20px;
        }
        .pr30
        {
            padding-right: 30px;
        }
        .pr40
        {
            padding-right: 40px;
        }
        .pr50
        {
            padding-right: 50px;
        }
        .pr100
        {
            padding-right: 100px;
        }
        
        .pb5
        {
            padding-bottom: 5px;
        }
        .pb10
        {
            padding-bottom: 10px;
        }
        .pb15
        {
            padding-bottom: 15px;
        }
        .pb20
        {
            padding-bottom: 20px;
        }
        .pb30
        {
            padding-bottom: 30px;
        }
        .pb40
        {
            padding-bottom: 40px;
        }
        .pb50
        {
            padding-bottom: 50px;
        }
        .pb100
        {
            padding-bottom: 100px;
        }
        
        .pl5
        {
            padding-left: 5px;
        }
        .pl10
        {
            padding-left: 10px;
        }
        .pl15
        {
            padding-left: 15px;
        }
        .pl20
        {
            padding-left: 20px;
        }
        .pl30
        {
            padding-left: 30px;
        }
        .pl40
        {
            padding-left: 40px;
        }
        .pl50
        {
            padding-left: 50px;
        }
        .pl100
        {
            padding-left: 100px;
        }
        
        
        .w_box
        {
            overflow: hidden;
            _zoom: 1;
        }
        .w_side_bar
        {
            float: left;
            width: 200px;
        }
        .w_content
        {
            float: left;
            margin-left: 10px;
            width: 910px;
        }
        
        .w_side_menu
        {
        }
        .w_side_menu a
        {
            text-decoration: none;
            color: #5097da;
        }
        .w_side_menu
        {
            margin-bottom: 1px;
            width: 198px;
            border: 1px solid #79b7e7;
        }
        .w_side_menu_level1
        {
            height: 24px;
            line-height: 24px;
            text-indent: 22px;
            font-size: 12px;
            letter-spacing: 1px;
            background-color: #eaf4fd;
        }
        .w_side_menu_level1 a
        {
            display: block;
            height: 24px;
            background-image: url(../images/icon-slide-down.png);
            background-repeat: no-repeat;
            background-position: 10px 50%;
            outline: none;
        }
        .w_side_menu_level1 a.on
        {
            color: #e17009;
            background-image: url(../images/icon-slide-up.png);
        }
        .w_side_menu_level2
        {
            display: none;
            margin-left: auto;
            margin-right: auto;
            width: 170px;
        }
        .w_side_menu_level2 li
        {
            margin: 4px 0;
            width: 168px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border: 1px solid #f6b9d6;
            font-size: 12px;
            background-color: #fffbf5;
        }
        .w_side_menu_level2 li a
        {
            display: block;
            height: 20px;
            color: #222;
        }
        .w_side_menu_level2 li.on, .w_side_menu_level2 li a:hover
        {
            background-color: #f6b9d6;
        }
        .w_side_menu_level2 li.on a, .w_side_menu_level2 li a:hover
        {
            color: #FFF;
        }
        
        .w_content_search
        {
            height: 26px;
        }
        .w_content_search input
        {
            float: left;
            margin-right: 10px;
        }
        .w_content_search_input
        {
            padding: 2px 10px;
            width: 280px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #7f7f7f;
        }
        .w_content_search_btn
        {
            width: 124px;
            height: 26px;
            line-height: 24px;
            text-align: center;
            border: 1px solid #7f7f7f;
            cursor: pointer;
            background: url(../images/bg-btn-x.png) repeat-x;
        }
        .w_content_window_code
        {
            margin-top: 3px;
            width: 910px;
            border: 1px solid #79b7e7;
            overflow: auto;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="w_box">
        <div class="w_side_bar">
            <div class="w_side_nav">
                <!--代码片断开始-->
                <div class="w_side_menu">
                    <div class="w_side_menu_level1">
                        <h2>
                            <a class="on" href="javascript:void(0);" hidefocus="true">代码片断</a></h2>
                    </div>
                    <div class="w_side_menu_level2" style="display: block;">
                        <ul class="Code">
                            <li><a href="javascript:void(0);" typeid="1" hidefocus="true">SEO优化</a></li>
                            <li><a href="javascript:void(0);" typeid="2" hidefocus="true">循环控件</a></li>
                            <li><a href="javascript:void(0);" typeid="3" hidefocus="true">分页控件</a></li>
                        </ul>
                    </div>
                </div>
                <!--代码片断结束-->
                <!--网站设置开始 -->
                <div class="w_side_menu">
                    <div class="w_side_menu_level1">
                        <h2>
                            <a class="on" href="javascript:void(0);" hidefocus="true">网站设置</a></h2>
                    </div>
                    <div class="w_side_menu_level2" style="display: block;">
                        <ul class="WebSet">
                            <asp:Repeater runat="server" ID="rpWebSet">
                                <ItemTemplate>
                                    <li><a href="javascript:void(0);" hidefocus="true" guid="<%#Eval("Guid") %>">
                                        <%#Eval("Name") %></a></li>
                                </ItemTemplate>
                            </asp:Repeater>
                        </ul>
                    </div>
                </div>
                <!--网站设置结束 -->
                <!--数据源开始 -->
                <div class="w_side_menu">
                    <div class="w_side_menu_level1">
                        <h2>
                            <a class="on" href="javascript:void(0);" hidefocus="true">数据源</a></h2>
                    </div>
                    <div class="w_side_menu_level2" style="display: block;">
                        <ul class="DataSource">
                            <asp:Repeater runat="server" ID="RpDataSource">
                                <ItemTemplate>
                                    <li><a href="javascript:void(0);" hidefocus="true" name="<%#Eval("name") %>">
                                        <%#Eval("Name") %></a></li>
                                </ItemTemplate>
                            </asp:Repeater>
                        </ul>
                    </div>
                </div>
                <!--数据源结束 -->
                <!--内容模型开始 -->
                <div class="w_side_menu">
                    <div class="w_side_menu_level1">
                        <h2>
                            <a class="on" href="javascript:void(0);" hidefocus="true">内容模型</a></h2>
                    </div>
                    <div class="w_side_menu_level2" style="display: block;">
                        <table>
                            <tr>
                                <td style="padding-top:5px">
                                    <asp:DropDownList runat="server" ID="ddlModel">
                                    </asp:DropDownList>
                                </td>
                            </tr>
                            <tr>
                               <td style="padding-top:5px">
                                    <asp:Button runat="server" ID="btnInsertModel" CssClass="dialogbutton" Text="插入模型" />
                                </td>
                            </tr>
                            <tr>
                                <td style="padding-top:5px">
                                    <asp:Button runat="server" ID="btnSearch" CssClass="dialogbutton" Text="解析" />
                                </td>
                            </tr>
                        </table>
                        <br />
                        <ul class="DataModel">
                        </ul>
                    </div>
                </div>
                <!--内容模型结束 -->
            </div>
        </div>
        <!-- /w_side_box -->
        <div class="w_content">
            <div class="w_content_window">
                <div class="w_content_window_code">
                    <asp:TextBox runat="server" ID="txtContent" TextMode="MultiLine" Height="500px" Width="970px"></asp:TextBox>
                </div>
            </div>
        </div>
        <asp:Button runat="server" ID="btnSubmit" CssClass="button" Text="保存" Style="display: none"
            OnClick="btnSubmit_Click" />
    </div>
    <script type="text/javascript">
        $(function () {
            $(".w_side_menu_level1").click(function () {
                $(this).find("a").addClass("on");
                $(this).siblings(".w_side_menu_level2").slideDown();
                $(this).parents(".w_side_menu").siblings().find(".w_side_menu_level1 a").removeClass("on");
                $(this).parents(".w_side_menu").siblings().find(".w_side_menu_level2").slideUp();
            });
        });


        (function ($) {
            http: //www.css88.com/archives/3627
            $.fn.insertContent = function (myValue, t) {
                var $t = $(this)[0];
                if (document.selection) { //ie
                    this.focus();
                    var sel = document.selection.createRange();
                    sel.text = myValue;
                    this.focus();
                    sel.moveStart('character', -l);
                    var wee = sel.text.length;
                    if (arguments.length == 2) {
                        var l = $t.value.length;
                        sel.moveEnd("character", wee + t);
                        t <= 0 ? sel.moveStart("character", wee - 2 * t - myValue.length) : sel.moveStart("character", wee - t - myValue.length);

                        sel.select();
                    }
                } else if ($t.selectionStart || $t.selectionStart == '0') {
                    var startPos = $t.selectionStart;
                    var endPos = $t.selectionEnd;
                    var scrollTop = $t.scrollTop;
                    $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
                    this.focus();
                    $t.selectionStart = startPos + myValue.length;
                    $t.selectionEnd = startPos + myValue.length;
                    $t.scrollTop = scrollTop;
                    if (arguments.length == 2) {
                        $t.setSelectionRange(startPos - t, $t.selectionEnd + t);
                        this.focus();
                    }
                }
                else {
                    this.value += myValue;
                    this.focus();
                }
            };
        })(jQuery);

        //左尖括号
        var lt = "&lt";
        //代码片断功能事情绑定
        $(function () {
            //代码片断事件绑定
            $(".Code>li>a").each(function () {
                $(this).bind("click", function () {
                    var txt = "";
                    var typeid = $(this).attr("TypeID");
                    switch (typeid) {
                        case "1":
                            txt = "<title>网页标题</title>\n<meta name=\"Keywords\" content=\"\" />\n<meta name=\"description\" content=\"\" />";
                            break;
                        //所有左尖括号用“&lt”代替                     
                        case "2":
                            txt = lt + "cms:Repeater ID=\"Rp<%=DateTimeHelper.GetTimestamp() %>\" runat=\"server\" DataName=\"\">\n" +
                                 "     <ItemTemplate>\n" +
                                 "        " + lt + "%#DataBinder.Eval(Container.DataItem, \"ID\")%>\n" +
                                 "     </ItemTemplate>\n" +
                                 "</cms:Repeater>\n";
                            break;
                        case "3":
                            txt = lt + "cms:Pager ID=\"Pager<%=DateTimeHelper.GetTimestamp() %>\" runat=\"server\" RepeaterID=\"rp\" PageSize=\"10\" />";
                    }
                    InsertTxt(txt);
                });
            });
            //网站设置事件绑定
            $(".WebSet>li>a").each(function () {
                $(this).bind("click", function () {
                    var guid = $(this).attr("guid");
                    var txt = lt + "cms:weboption ID=\"Weboption<%=DateTimeHelper.GetTimestamp() %>\" runat=\"server\" Guid=\"" + guid + "\" /> ";
                    InsertTxt(txt);
                });

            });
            //数据源事件绑定
            $(".DataSource>li>a").each(function () {
                $(this).bind("click", function () {
                    var txt = $(this).attr("name");
                    InsertTxt(txt);
                });

            });
            //插入模型按钮事件
            $("#<%=btnInsertModel.ClientID %>").bind("click", function () {
                var modelName = $("#<%=ddlModel.ClientID %>").text();
                modelName = $.trim(modelName);
                var modelId = $("#<%=ddlModel.ClientID %>").val();
                var txt = lt + "cms:DataModel runat=\"server\" ID=\"DataModel"+modelId+"\"  ItemId=\"ID\" ModelName=\"" + modelName + "\"></cms:DataModel>";
                InsertTxt(txt);
                return false;
            });

            //类型模型解析按钮事件
            $("#<%=btnSearch.ClientID %>").bind("click", function () {
                var modelID = $("#<%=ddlModel.ClientID %>").val();
                $.ajax({
                    type: "get", //使用get方法访问后台
                    dataType: "json", //返回json格式的数据
                    url: "/Admin/Content/GetContentModelField.aspx", //要访问的后台地址
                    data: "ModelID=" + modelID, //要发送的数据
                    success: function (msg) { //msg为返回的数据，在这里做数据绑定
                        var data = msg.Table;
                        var html = "";
                        $.each(data, function (i, n) {
                            html += "<li><a href=\"javascript:void(0);\" hidefocus=\"true\" Field=\"" + n.Name + "\">" + n.Name + "</a></li>";
                        });
                        $(".DataModel").html(html);

                        //给模型字段赋与事件
                        $(".DataModel>li>a").each(function () {
                            $(this).bind("click", function () {
                                var field = $(this).attr("Field");
                                //当前选中模型ID
                                var modelId = $("#<%=ddlModel.ClientID %>").val();
                                var txt = lt + "cms:DataField runat=\"server\" Field=\"" + field + "\" DataModelID=\"DataModel" + modelId + "\"></cms:DataField>";
                                InsertTxt(txt);
                            });

                        });
                    }
                });
                
                //禁止回发
                return false;
            });
        });

        //插入代码片断
        function InsertTxt(tips) {
            var reg = new RegExp(lt, "g"); //创建正则RegExp对象
            tips = tips.replace(reg, "<");
            $("#<%=txtContent.ClientID %>").insertContent(tips);
        }
    </script>
</asp:Content>
